* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}
.container {
    filter: brightness(300%);
    overflow: hidden;
}
span.text {
    color: #fff;
    font-size: 200px;
    font-weight: bold;
    background-color: #000;
    &::before {
        content: 'HELLO!';
        position: absolute;
        mix-blend-mode: difference;
        filter: blur(2px);
    }
}
span.back {
    background: linear-gradient(113deg, rgba(193, 148, 63, 1), rgba(238, 205, 108, 1));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
}
span.shine {
    background: radial-gradient(circle at center, #fff, #000 35%) center / 25% 25%;
    position: absolute;
    top: -100%;
    left: -100%;
    bottom: 0;
    right: 0;
    mix-blend-mode: color-dodge;
    animation:move 2s linear infinite;
}

@keyframes move {
    to {
        transform: translate(50%, 50%);
    }
}
